<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="员工工号" prop="staffNo">
                <el-input v-model="queryParams.staffNo" placeholder="请输入工号" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="员工姓名" prop="username">
                <el-input v-model="queryParams.username" placeholder="请输入姓名" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="项目代码" prop="projectCode">
                <el-input v-model="queryParams.projectCode" placeholder="请输入项目代码" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="成绩状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="成绩状态" clearable size="small">
                    <el-option v-for="dict in scoreStatusOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="成绩类型" prop="scoreType">
                <el-select v-model="queryParams.scoreType" placeholder="成绩类型" clearable size="small">
                    <el-option v-for="dict in scoreTypeOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="考试日期">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px"
                        value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="info" icon="el-icon-upload2" size="mini"
                        @click="handleImport"
                >导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini"
                        @click="handleExport"
                >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="scoreList" @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="55" align="center" />-->
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false"/>
            <el-table-column label="工号" align="center" prop="staffNo" :show-overflow-tooltip="true"/>
            <el-table-column label="姓名" align="center" prop="username" :show-overflow-tooltip="true"/>
            <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
            <el-table-column label="项目代码" align="center" prop="projectCode"/>
            <el-table-column label="考试日期" align="center" width="100" prop="examDate" />
            <el-table-column label="机考成绩" align="center" prop="theoryScore" :show-overflow-tooltip="true" :formatter="theoryScoreFormat"/>
            <el-table-column label="实操成绩" align="center" prop="operateScore" :show-overflow-tooltip="true" :formatter="operateScoreFormat"/>
<!--            <el-table-column label="交卷时间" align="center" prop="submitDate"/>-->
<!--            <el-table-column label="答题用时(分)" align="center" prop="answerDate"/>-->
            <el-table-column label="成绩状态" align="center" prop="status" :formatter="scoreStatusFormat"/>
            <el-table-column label="成绩类型" align="center" prop="scoreType" :formatter="scoreTypeFormat"/>
            <el-table-column label="证书编号" align="center" prop="certNumber" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="150" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                               @click="handleDetail(scope.row)"
                    >详情</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view"
                               @click="answerResult(scope.row)"
                    >查看结果</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />
<!--   成绩详情     -->
        <el-dialog :title="title" :visible.sync="scoreDetailOpen" v-if="scoreDetailOpen" width="65%" append-to-body>
            <score-detail-form :scoreStatusOptions="scoreStatusOptions" :scoreTypeOptions="scoreTypeOptions" :scoreForm="scoreForm"  @cancelDialog="cancel"></score-detail-form>
        </el-dialog>
        <!-- 成绩导入对话框 -->
        <el-dialog :title="uploadTitle" :visible.sync="uploadOpen" width="400px" append-to-body>
            <ExcelImport :uploadUrl="uploadUrl" @importTemplate="importTemplateCallback" @submitBtnSuccess="getList" @cancelDialog="handleImportCancle"/>
        </el-dialog>

    </div>
</template>

<script>
    import {exportScore, importTemplate, listScoreInfo} from "@/api/exam/scoreInfo";
    import scoreDetailForm from "./form/scoreDetailForm";
    import ExcelImport from "@/components/tools/ExcelImport";

    export default {
        name: "scoreInfo",
        components: {
            scoreDetailForm,
            ExcelImport,
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 成绩表格数据
                scoreList: [],
                // 弹出层标题
                title: "",
                // 是否显示成绩详情弹出层
                scoreDetailOpen: false,
                // 成绩状态数据字典
                scoreStatusOptions: [],
                // 成绩类型数据字典
                scoreTypeOptions: [],
                // 日期范围
                dateRange: [],
                // 成绩详情表单
                scoreForm: {},
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 查询参数
                queryParams: {
                    staffNo: undefined,
                    username: undefined,
                    deptName: undefined,
                    projectCode: undefined,
                    readStatus: '0',// 0:已阅卷
                    status: undefined,
                    scoreType: undefined,
                },
                // 成绩导入参数
                uploadUrl: "/api/uf/boostor/exam/score/ExamScoreInfoRest/importData/v1",
                // 是否显示弹出层（实操成绩导入）
                uploadOpen: false,
                // 弹出层标题（实操成绩导入）
                uploadTitle: '',
            };
        },
        created() {
            this.getList();
            //查询成绩状态字典状态
            this.getDicts("exam_score_status").then(response => {
                this.scoreStatusOptions = response.responseBody.result;
            });
            //查询成绩类型字典状态
            this.getDicts("exam_score_type").then(response => {
                this.scoreTypeOptions = response.responseBody.result;
            });
            this.getList();
        },
        methods: {
            /** 查询成绩列表 */
            getList() {
                this.loading = true;
                listScoreInfo({
                        'pageParameter': this.pageParams,
                        'searchParams': this.addDateRange(this.queryParams, this.dateRange)
                }).then(response => {
                    this.scoreList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },
            // 机考成绩为空是就显示N/A
            theoryScoreFormat(row,column) {
                if (row.theoryScore == null || row.theoryScore == 0) {
                    return "N/A";
                }
                return row.theoryScore;
            },
            // 实操成绩为空是就显示N/A
            operateScoreFormat(row,column) {
                if (row.operateScore == null || row.operateScore == 0) {
                    return "N/A";
                }
                return row.operateScore;
            },
            // 成绩状态字典翻译
            scoreStatusFormat(row, column) {
                return this.selectDictLabel(this.scoreStatusOptions, row.status);
            },
            // 成绩类型字典翻译
            scoreTypeFormat(row, column) {
                return this.selectDictLabel(this.scoreTypeOptions, row.scoreType);
            },
            // 取消按钮
            cancel() {
                this.reset();
                this.scoreDetailOpen = false;
            },
            // 表单重置
            reset() {
                this.form = {
                    staffNo: undefined,
                    username: undefined,
                    deptName: undefined,
                    projectCode: undefined,
                    status: undefined,
                    scoreType: undefined
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.pageParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.dateRange = [];
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.scoreId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 成绩详情 */
            handleDetail(row) {
                this.scoreForm = row;
                this.title = '成绩详情';
                this.scoreDetailOpen = true;
            },
            // 查看考试结果
            answerResult(row) {
                var routeUrl = this.$router.resolve({
                    path: '/simulate-submit?scoreId='+row.scoreId+''
                })
                // 打开新页面--》答题结果页面
                window.open(routeUrl.href, '_blank');
            },

            /** 下载模板操作 */
            importTemplateCallback(callback) {
                importTemplate().then(response => {
                    callback(response.responseBody)
                })
            },
            /** 导入按钮操作 */
            handleImport() {
                this.uploadTitle = "实操成绩导入";
                this.uploadOpen = true;
            },
            /** 导入取消按钮 */
            handleImportCancle() {
                this.uploadOpen = false;
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确定导出所有成绩数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    exportScore({searchParams: queryParams}).then(response => {
                        this.download(response.responseBody);
                    })
                }).catch(() => {})
            },

        }
    };
</script>
